<!doctype html>
<html>
<head>
    <script src="../../../build/output/playcanvas-latest.js"></script>
    <link href="../../style.css" rel="stylesheet" />
</head>

<body>
    <!-- The canvas element -->
    <canvas id="application-canvas"></canvas>

    <script>
        var canvas = document.getElementById("application-canvas");

        // Create the application and start the update loop
        var app = new pc.Application(canvas);
        app.start();

        // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        // Create an Entity with a camera component
        var cameraEntity = new pc.Entity();
        cameraEntity.addComponent("camera", {
            clearColor: new pc.Color(0,0,0)
        });
        cameraEntity.rotateLocal(0, 0, 0);
        cameraEntity.translateLocal(0, 0, 10);

        // Create a directional light
        var lightDirEntity = new pc.Entity();
        lightDirEntity.addComponent("light", {
            type: "directional",
            color: new pc.Color(1, 1, 1),
            intensity: 1
        });
        lightDirEntity.setLocalEulerAngles(45,0,0);

        // Add Entities into the scene hierarchy
        app.root.addChild(cameraEntity);
        app.root.addChild(lightDirEntity);


        // set up random downwards velocity from -0.4 to -0.7
        var velocityCurve = new pc.CurveSet([
            [0, 0],     // x
            [0, -0.7],  // y
            [0, 0]      // z
        ]);
        var velocityCurve2 = new pc.CurveSet([
            [0, 0],   // x
            [0, -0.4],// y
            [0, 0]    // z
        ]);

        // set up random rotation speed from -100 to 100 degrees per second
        var rotCurve = new pc.Curve([0, 100]);
        var rotCurve2 = new pc.Curve([0, -100]);

        // scale is constant at 0.1
        var scaleCurve = new pc.Curve([0, 0.1]);

        // Create entity for particle system
        var entity = new pc.Entity();
        app.root.addChild(entity);
        entity.setLocalPosition(0, 3, 0);

        // load snowflake texture
        app.assets.loadFromUrl('../../assets/snowflake.png', 'texture', function (err, asset) {
            // when texture is loaded add particlesystem component to entity
            entity.addComponent("particlesystem", {
                numParticles: 100,
                lifetime: 10,
                rate: 0.1,
                startAngle: 360,
                startAngle2: -360,
                emitterExtents: new pc.Vec3(5, 0, 0),
                velocityGraph: velocityCurve,
                velocityGraph2: velocityCurve2,
                scaleGraph: scaleCurve,
                rotationSpeedGraph: rotCurve,
                rotationSpeedGraph2: rotCurve2,
                colorMap: asset.resource
            });
        });

    </script>
</body>
</html>
